<template>
  <view class="tabList">
    <view class="tabItem"
      v-for="(item, index) in list"
      :key="item.name"
      @click="changeTab(index)"
    >
      <view class="name">{{item.name}}</view>
    </view>
    <view class="underline" :class="{
      middle: current === 1,
      right: current === 2
    }">
      <view class="line"></view>
    </view>
  </view>
</template>

<script>
export default {
 props: {
   list: {
     type: Array,
     required: true
   },
   current: {
     type: Number,
     required: true
   }
 },
 methods: {
   changeTab(index) {
     this.$emit('change', index)
   }
 }
}
</script>

<style lang="scss" scoped>
.tabList {
  display: flex;
  position: relative;
  .tabItem {
    width: 33.33%;
    padding: 0 48rpx;
    text-align: center;
    font-size: 30rpx;
    
  }
  .name {
    padding: 23rpx 0;
  }
  .underline {
    padding: 0 23rpx;
    width: 33.33%;
    height: 3rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s;
    .line {
      background: $theme-color;
      height: 100%;
      width: 100%;
    }
  }
  .middle {
    left: 33.33%;
  }
  .right {
    left: 66.66%;
  }
}
</style>